import React,{useState,useRef}from 'react'
import { Alert, Steps,Button} from 'antd';
import GoodsAttr from './components/GoodsAttr';
import GoodsInfo from './components/GoodsInfo';
import GoodsContent from './components/GoodsContent';
import GoodsParams from './components/GoodsParams';
import GoodsImg from './components/GoodsImg';
import Over from './components/Over';
import { getParamsAttr } from '../../api/goods';
import { addGoods } from '../../api/goods';
export default function Addgoods() {
    let GoodsAttrRef = useRef<any>();
    let GoodsContentRef = useRef<any>();
    // 定义info组件ref
    let GoodsInfoRef = useRef<any>();
    // 定义商品详情状态 表单数据
    let [goods_info,setGoodsInfo] = useState<GoodsInfoFormData>({
        goods_name:"",
        goods_number:0,
        goods_price:0,
        goods_cat:[],
        goods_weight:0
    })
    // 定义商品参数列表状态
    let [params,setParams] = useState<ParamsAttrType[]>([])
    let [attr,setAttr] = useState<ParamsAttrType[]>([])
    let [attrids,setattrids] = useState<any>();
    // 定义当前步骤状态
    let [current,setCurrent] = useState(0)
    let items = [
        {
            title: '基本信息',
        },
        {
            title: '商品参数',
        },
        {
            title: '商品属性',
        },{
            title:"商品图片"
        },{
            title:"商品内容"
        },{
            title:"完成"
        }
    ]
    // 下一步
    let next = ()=>{
        if(current===2){
            setattrids(GoodsAttrRef.current.form.getFieldsValue(true))
        }
        if(current!==0){
            current++;
            setCurrent(current)
            return
        }
        // 表单校验
        GoodsInfoRef.current.form.validateFields().then((value:GoodsInfoFormData)=>{
            // 表单校验通过 value为表单内容
            setGoodsInfo(value)
            getParams(value.goods_cat[2])
            getAttr(value.goods_cat[2])
            current++;
            setCurrent(current)
        }).catch((err:any)=>{
            console.log(err)
        })
    }
    // 上一步
    let pre= ()=>{
        current--;
        setCurrent(current)
    }
    // 获取商品动态参数
    let getParams = async (id:number)=>{
        let res = await getParamsAttr(id,'many');
        console.log(res)
        if(res.data.meta.status === 200){
            res.data.data.forEach((item:ParamsAttrType)=>{
                item.attr_vals = (item.attr_vals as string).split(" ");
            })
            setParams(res.data.data)
        }
    }
    //获取商品静态属性
    let getAttr = async (id:number)=>{
        let res = await getParamsAttr(id,'only');
        if(res.data.meta.status === 200){
            setAttr(res.data.data)
        }
    }
    //确认添加
    let add =async ()=>{
        console.log(goods_info)
        
        // 获取富文本编辑器内容 
        let  goods_introduce:string = GoodsContentRef.current.html;
        // 属性列表;
        let attr:AttrType[] = [];
        params.map(item=>{
            let obj:AttrType = {
                attr_id:item.attr_id,
                attr_value:(item.attr_vals as string[]).join(",")
            }
            attr.push(obj);
        })
        for(let key in attrids){
            let obj:AttrType={
                attr_id:Number(key),
                attr_value:attrids[key]
            }
            attr.push(obj);
        }
        console.log(attr);
        // 请求参数
        let data:AddGoodsParams = {
            goods_name:goods_info?.goods_name,
            goods_price:goods_info?.goods_price,
            goods_cat:goods_info.goods_cat.join(","),
            goods_weight:goods_info.goods_weight,
            goods_number:goods_info.goods_number,
            goods_introduce,
            attrs:attr
        }
        let res = await addGoods(data);
        if(res.data.meta.status===201){
            current++;
            setCurrent(current);
        }
    }
    return (
        <div>
            <Alert message="添加商品信息" type="success" closable showIcon />
            <div style={{margin:"20px 20px"}}>
                <Steps
                    current={current}
                    items={items}
                />
            </div>
            <div  style={{margin:"20px 20px"}}>
                {
                    current ===0 && <GoodsInfo ref={GoodsInfoRef}/>
                }
                {
                    current ===1 && <GoodsParams params={params} removeTag={(index,i)=>{
                        console.log(index,i)
                        let list = [...params];
                        // 删除params中指定属值
                        (list[index].attr_vals as string[]).splice(i,1);
                        setParams(list);
                    }}/>
                }
                {
                    current ===2 && <GoodsAttr params={attr} ref={GoodsAttrRef}/>
                }
                {
                    current ===3 && <GoodsImg/>
                }
                {
                    current ===4 && <GoodsContent ref={GoodsContentRef}/>
                } {
                    current ===5 && <Over agin={()=>{
                         setCurrent(0)
                    }}/>
                }
            </div>
            {
                current !==5 &&  <div style={{textAlign:"center"}}>
        
                {
                    current !==0 &&      <Button type='primary' onClick={pre}>上一步</Button>
                }
                    &nbsp; &nbsp;
                {
                    current !==4 &&  <Button type='primary' onClick={next}>下一步</Button> 
                }
              
                 &nbsp; &nbsp;
                {
                    current ===4 &&   <Button type='primary' onClick={add}>确认添加</Button>
                }
            </div>
            }
        </div>
    )
}